<template>
	<!-- A仓 -->
	<view style="min-height: 800px;">
		<scroll-view id="nav-bar" scroll-x class="nav margin-top">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :id="'tab'+index" v-for="(item,index) in tabBars" :key="item.id" :class="index==tabCurrentIndex?'text-white cur':''"
				 @tap="changeTab(index)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<!-- 下拉刷新组件 -->
		<!-- <mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh"
		 @setEnableScroll="setEnableScroll"> -->
		<!-- 内容部分 -->
		<swiper id="swiper" class="swiper-box" :duration="300" :current="tabCurrentIndex" @change="changeTab">
			<swiper-item v-for="tabItem in tabBars" :key="tabItem.id">

				<!-- tab1 主页-->
				<view class="cu-card  " v-if="tabItem.id==1">
					<view class="cu-item shadow padding">
						<text class="uni-h4">基本信息</text>
						<view class="flex">
							<view class="uni-h5 text-gray title">交易所</view>
							<text class="margin-left-sm">伦敦交易所</text>
						</view>
						<view class="flex">
							<view class="uni-h5 text-gray title">国家地区</view>
							<text class="margin-left-sm">英国</text>
						</view>
					</view>
				</view>
				<!-- tab1 end -->

				<!-- tab2 账户-->
				<view class="cu-card  " v-if="tabItem.id==2">
					<view class="cu-item shadow padding">

						<view class="flex" style="  position: inherit; ">
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit uni-h3 text-yellow">{{account.balance||0}}</view>
								<text class="text-gray uni-h5">伦敦总资产</text>
							</view>
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit uni-h3 text-yellow">{{account.availableBalance||0}}</view>
								<text class="text-gray uni-h5">可用余额</text>

							</view>
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit uni-h3 text-yellow">{{account.unrealisedPnl||0}}</view>
								<text class="text-gray uni-h5">总未实现盈亏</text>

							</view>
						</view>
						<!-- <view class="flex">
							<view class="flex-twice">
								<view class="flex">
									<view class="uni-h5 text-gray title2">交易笔数</view>
									<text class="margin-left-sm">12212</text>
								</view>
							</view>
							<view class="flex-twice">
								<view class="flex">
									<view class="uni-h5 text-gray title2">账户余额</view>
									<text class="margin-left-sm">15211</text>
								</view>
							</view>
						</view>

						<view class="flex">
							<view class="flex-twice">
								<view class="flex">
									<view class="uni-h5 text-gray title2">账户权益</view>
									<text class="margin-left-sm  ">56621</text>
								</view>
							</view>
							<view class="flex-twice">
								<view class="flex">
									<view class="uni-h5 text-gray title2">浮动盈亏</view>
									<text class="margin-left-sm">121</text>
								</view>
							</view>
						</view> -->
					</view>
				</view>
				<!-- tab2 end-->

				<!-- tab3 交易 -->
				<div class="" v-if="tabItem.id==3">
					<Aorderlist :symbol="salename" ref="child"> </Aorderlist>
				</div>
				<!-- tab3 end-->

				<!-- tab4 跟随 -->
				<view class="uni-flex uni-row padding-sm" v-if="tabItem.id==4">

					<view>
						<button class="cu-btn margin-left-sm round sm line-yellow">当前跟随</button>
						<button class="cu-btn margin-left-sm round sm line-yellow">历史跟随</button>
					</view>

				</view>
				<view class="cu-card case" v-if="tabCurrentIndex==3">
					<view class="cu-item shadow" v-for="item in 5">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
								<view class="content flex-sub">
									<view class="text-grey flex justify-between">正义天使

									</view>
									<view class="text-gray text-sm flex justify-between">
										加入时间：2020-10-10

									</view>
								</view>
							</view>
						</view>
						<view class="flex" style="  position: inherit; ">
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit ">USDT</view>
								<text class="text-gray ">跟随币种</text>
							</view>
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit ">4526</view>
								<text class="text-gray ">对冲收益</text>
							</view>
							<view class="flex-sub  margin-xs radius text-center">
								<view class="tit ">212</view>
								<text class="text-gray ">对冲笔数</text>
							</view>
						</view>

					</view>

				</view>
				<!-- tab4 end-->

			</swiper-item>
		</swiper>
		<!-- </mix-pulldown-refresh> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	// import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import Aorderlist from '@/components/a-warehouse/Aorderlist.vue';
	// import json from '@/json'
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			// mixPulldownRefresh,
			mixLoadMore,
			Aorderlist
		},
		props: {
			ptype1: {
				type: String,
				default: () => {
					return ''
				}
			},
			ptype2: {
				type: String,
				default: () => {
					return ''
				}
			},
			buyname: {
				type: String,
				default: () => {
					return ''
				}
			},
			salename: {
				type: String,
				default: () => {
					return ''
				}
			},
		},
		data() {
			return {
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				category_id: 0,
				TabCur: 0, //当前选项卡索引 
				account: [],
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		mounted() {
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
			this.loadTabbars();
			// console.log(3232323)
			// this.getAccount()
		}, 
		methods: {
			...mapActions(['getUserinfo']),
			getAccount() { 
				// this.$http.post('Contract2.getAccount').then(res => {
				// 	console.log(res);
				// 	if (res.code == 1) {
				// 		this.account = res.data.data
				// 	}
				// })
				this.$http.post('Contract2.getAccount').then(res => {
					// console.log(res);
					if (res.code == 1) {
						uni.request({
							url:this.$host+ res.data.url,
							data: {},
							header: res.data.head,
							success: (e) => { 
								// console.log(JSON.stringify(e.data));
								if (e.data.code == 200) {
									this.account = e.data.data
								}
							}
						});
					}
				}) 
			},
			//获取分类
			loadTabbars() {
				console.log(this.i18n.order.tab1)
				let tabList = [
				// 	{
				// 	name: '主页',
				// 	id: '1',
				// 	uri: ''
				// }, 
				{
					name: '账户',
					id: '2',
					uri: ''
				}, {
					name: '交易',
					id: '3',
					uri: ''
				}, 
				// {
				// 	name: '跟随',
				// 	id: '4',
				// 	uri: ''
				// },
				];
				tabList.forEach(item => {
					item.newsList = [];
					item.loadMoreStatus = 0; //加载更多 0加载前，1加载中，2没有更多了
					item.refreshing = 0;
					item.page = 1;
				})
				this.tabBars = tabList;
				// this.loadNewsList('add');

			},
			//下拉刷新
			onPulldownReresh() {
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore() {
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable) {
				if (this.enableScroll !== enable) {
					this.enableScroll = enable;
				}
			},
			//列表
			loadNewsList(type) {
				return 1;
				let tabItem = this.tabBars[this.tabCurrentIndex];
				console.log(type)
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (tabItem.loadMoreStatus === 2) {
						return;
					}
					tabItem.loadMoreStatus = 1;
				}
				// #ifdef APP-PLUS
				else if (type === 'refresh') {
					tabItem.refreshing = true;
				}
				// #endif

				if (type === 'refresh') {
					tabItem.page = 1;
				}
				// 请求数据
				let send = {
					ptype1: this.ptype1,
					ptype2: this.ptype2,
					page: tabItem.page
				};
				this.$http.post(tabItem.uri, send).then(res => {
					let list = res.data.data;
					if (type === 'refresh') {
						tabItem.newsList = []; //刷新前清空数组
						//下拉刷新 关闭刷新动画
						this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						tabItem.refreshing = false;
						// #endif
						tabItem.loadMoreStatus = 0;
					}
					list.forEach(item => {
						// item.id = parseInt(Math.random() * 10000);
						tabItem.newsList.push(item);
					})

					tabItem.loadMoreStatus = res.data.current_page >= res.data.last_page ? 2 : 0;
					tabItem.page += 1;
				})

			},

			//tab切换
			async changeTab(e) {

				if (scrollTimer) {
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if (typeof e === 'object') {
					index = e.detail.current
				}
				if (typeof tabBar !== 'object') {
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0;
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if (typeof e === 'number') {
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index;
				}

				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(() => {
					if (width - nowWidth / 2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
					} else {
						this.scrollLeft = 0;
					}
					if (typeof e === 'object') {
						this.tabCurrentIndex = index;
					}
					this.tabCurrentIndex = index;  
					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					if (tabItem.id == 2) {
						this.getAccount()
					}
					if (tabItem.id == 3) {
						this.$refs.child[0].loadNewsList('refresh')
					}
					if (this.tabCurrentIndex !== 0 && tabItem.loaded !== true) {
						this.loadNewsList('add');
						tabItem.loaded = true;
					}
				}, 300)

			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			// tabSelect(e) {
			// 	this.tabCurrentIndex = e.currentTarget.dataset.id;
			// 	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			// }
		}
	}
</script>

<style scoped>
	.cu-card .title {
		width: 28%;
	}

	.cu-card .title2 {
		width: 70px;
	}

	.trade_1 {
		position: absolute;
		left: 18px;
	}

	.tit {
		font-weight: 600;
		font-size: 18px;
	}

	.row {
		display: inline;
	}

	.bai {
		padding: 6px 12px;
		border-radius: 8px;
	}

	.nowrap {
		white-space: nowrap;
	}

	.cu-list {
		margin-top: 2px;
	}

	.cu-list.grid.no-border {
		padding: 3px 17px;
	}

	.nav .cu-item {
		border: none;
	}


	.swiper-box {
		min-height: 800px;
	}

	.panel-scroll-box {
		height: 100%;

		.panel-item {
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}
</style>
